<template>
  <a-modal
    style="background-color: rgb(207, 37, 37)"
    title="Title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>{{ ModalText }}</p>
  </a-modal>
</template>

<script>
export default {
  name: '',
  props: {
    visible: { type: Boolean, default: true }
  },
  data () {
    return {
      confirmLoading: false,
      ModalText: 'Content of the modal'
    }
  },
  methods: {
    handleOk (e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel (e) {
      console.log('Clicked cancel button')
      this.visible = false
    }
  }
}
</script>

<style>
</style>
